<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>涛宝商城-商品搜索</title>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/style.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/core.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.css}" />
<script th:src="@{appstyle/js/jquery-3.3.1.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<body>
	<div id="header">
		<p class="p1">涛宝商城,只有想不到,没有买不到!!!</p>
	</div>
	<div id="header_1">
		<div class="login">
			<div class="login_1">
				<span class="span"> <a href="/taobaostore/Land.html"
					th:if="${session.currentUser==null}">登录</a>
					<div class="mdui-container"
						style="display: inline-block; position: absolute; top: -5px"
						th:if="${session.currentUser!=null}">
						<div class="mdui-chip">
							<img class="mdui-chip-icon"
								th:src="@{${session?.currentUser?.headpic}}" /> <span
								class="mdui-chip-title"
								th:text="${session?.currentUser?.username}"></span> <span
								class="mdui-chip-title"><i
								class="mdui-icon material-icons"
								mdui-tooltip="{content: '安全退出'}" onclick="clickLogout()">&#xe5cd;</i></span>
						</div>
					</div> <a href="/taobaostore/register.html" th:if="${session.currentUser==null}">注册</a>
				</span>
				<ul class="ul1">
					<li class="li1"><a href="/taobaostore/Shopping_Cart.html" class="a1">购物车(<span
							class="number">0</span>)
					</a></li>
					<li class="li1"><a href="/taobaostore/orderMsg.html" class="a1">我的订单</a></li>
					<li class="li1"><a href="/taobaostore/userMsg.html" class="a1">我的涛宝</a></li>
					<li class="li1"><a href="/taobaostore/taobaostoreMsg.html" class="a1">关于涛宝</a></li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		clickLogout = function() {
			$.ajax({
				url : "user/logout.do",
				Type : "post",
				dataType : "json",
				success : function(data) {
					mdui.snackbar({
					    message: '成功安全退出!',
					    position: 'top',
					    timeout:300,
					    onClosed:function(){
					    	location.reload();
					    }
				   });
				}
			})
		}
	</script>
	<div id="listBody">
		<div id="body">
			<!-- logo直接使用文字替代 -->
			<a class="logo" href="/taobaostore/index.html">涛宝商城</a>
			<div id="body-1">
				<input id="serach_Input" class="textinput" type="text" th:value="${session?.keyword}" placeholder=请输入商品名称 /> <input
					type="button" id="serach_Btn" class="button1" value="搜索	" />
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
			</div>
			<script type="text/javascript">
		$(document).ready(function(){
			$.ajax({
				url:"list.do",
				Type:"post",
				data:"keyword="+$("#serach_Input").val(),
				dataType:"json",
				success:function(data){
					var dataNum = 0;
					for(var i=0;i<data.data.list.length;i++){
						// 如果第五次了dataNum就叠加 换一个ul
						if(i%5==0 || i==0){
							$("#commodity").append("<ul class='ul4'></ul>");
						}data.data.list[i].id
						$("#commodity").find("ul").eq(0).append("<li class='li3' onclick=location.href='detail.do?productId="+data.data.list[i].id+"'><a><span class='span2'>"+data.data.list[i].name+"</span><img class='img' src="+data.data.list[i].image_Main+" /></a></li>");
					}
					if(data.data.list.length == 0){
						$("#commodity").append("<ul class='ul4'><img src='../appstyle/img/serachNull.jpg'><h1 style='display : inline;'>很抱歉,我们给不了你想要的!</h1><h1>请再看看其他商品吧</h1></ul>");
					}
				}
			})
			$("#serach_Btn").click(function(){
				alert($("#serach_Input").val());
				location.href="toSerachPage.do?keyword="+$("#serach_Input").val();
			})
			toDetail=function(id){
				location.href="detail.do?productId="+id;
			}
		})
			</script>
		</div>
		<style>
.login {
	background-color: darkgray;
	padding-bottom: 5px;
	padding-top: 3px;
	background-color: #EEEEEE;
}

.login_1 {
	width: 1080px;
	position: relative;
	border: 1px solid #EEEEEE;
	margin: 0 auto;
}
</style>
		<script type="text/javascript">
			var arrImg = new Array("appstyle/img/1.jpg", "appstyle//img/2.jpg",
					"appstyle//img/3.jpg", "appstyle//img/4.jpg");
			var indexImg = 0;
			var intervalNext = window.setInterval("imgCutNext()", 3000);
			$(document).ready(function() {
				// 第一次进入 直接显示第一张图片
				$("#slideshow").css("background", "url(" + arrImg[0] + ")");
				$("#leftpre").click(function() {
					imgCutPrev();
				})
				$("#rightnext").click(function() {
					imgCutNext();
				})
			})

			function imgCutNext() {
				indexImg++;
				if (indexImg == 4) {
					indexImg = 0;
				}
				$("#slideshow").css("background",
						"url(" + arrImg[indexImg] + ")");
			}

			function imgCutPrev() {
				indexImg--;
				if (indexImg == -1) {
					indexImg = 3;
				}
				$("#slideshow").css("background",
						"url(" + arrImg[indexImg] + ")");
			}
		</script>
</body>
</html>
